<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-width="200px">

      <el-form-item label="充值月数" prop="vip_charge_month">
        <el-input-number v-model="dataForm.vip_charge_month" :precision="0" :step="1" :max="100"
                         placeholder="月" class="input-width"></el-input-number>
        <span class="info">月</span>
      </el-form-item>

      <el-form-item label="充值金额" prop="vip_charge_money">
        <el-input-number v-model="dataForm.vip_charge_money" :precision="2" :step="1" :max="1000"
                         placeholder="元" class="input-width"></el-input-number>
        <span class="info">元</span>
      </el-form-item>

      <el-form-item label="用户协议" prop="user_wx_protocol">
        <editor v-model="dataForm.user_risk_wx_protocol" :init="editorInit"/>
      </el-form-item>

      <el-form-item label="隐私政策" prop="user_wx_privacy">
        <editor v-model="dataForm.user_risk_wx_privacy" :init="editorInit"/>
      </el-form-item>


      <el-form-item>
        <!--        <el-button @click="cancel">取消</el-button>-->
        <el-button type="primary" :loading="saveLoading" v-permission="['POST /admin/config/systemConfigUpdate']"
                   @click="update">确定
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { systemConfigDetail, systemConfigUpdate } from '@/api/config'
  import Editor from '@tinymce/tinymce-vue'
  import { createStorage } from '../../api/storage'

  export default {
    name: 'SuperviseTransConfig',
    components: { Editor },
    data() {
      return {
        saveLoading: false,
        dataForm: {
          user_risk_wx_protocol: '',
          user_risk_wx_privacy: '',
          vip_charge_month: 12,
          vip_charge_money: 10.00
        },
        rules: {
          vip_charge_month: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          vip_charge_money: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          user_risk_wx_protocol: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          user_risk_wx_privacy: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ]

        },
        editorInit: {
          language: 'zh_CN',
          height: '400px',
          convert_urls: false,
          plugins: [
            'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
          ],
          toolbar: [
            'searchreplace bold italic underline strikethrough fontselect fontsizeselect alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
            'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
          ],
          images_upload_handler: function(blobInfo, success, failure) {
            const formData = new FormData()
            formData.append('file', blobInfo.blob())
            createStorage(formData)
              .then(res => {
                success(res.data.data.url)
              })
              .catch(() => {
                failure('上传失败，请重新上传')
              })
          }
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        systemConfigDetail().then(response => {
          this.dataForm = response.data.data
        })
      },
      cancel() {

      },
      update() {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) {
            return false
          }
          this.doUpdate()
        })
      },
      doUpdate() {
        this.saveLoading = true
        systemConfigUpdate(this.dataForm)
          .then(response => {
            this.saveLoading = false
            this.$notify.success({
              title: '成功',
              message: '参数配置成功'
            })
          })
          .catch(response => {
            this.saveLoading = false
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      }
    }
  }
</script>

<style scoped>
  .input-width {
    width: 25%;
  }

  .info {
    margin-left: 35px;
    color: darkgray;
    /* font-size: 80%; */
  }
</style>
